<template>
  <div>
    <QueryForm
      v-model="filterForm"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="参与会员"
        prop="memberName"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="会员手机号"
        prop="phone"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="抽奖时间"
        prop="createTime"
        min-width="160"
      />
      <el-table-column align="center" label="是否中奖" min-width="100">
        <template slot-scope="{ row }">
          {{ row.isHit == 1 ? "中奖" : "未中奖" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="奖品名称"
        min-width="200"
        prop="prizeName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="奖品图片"
        min-width="100"
        prop="poster"
      >
        <template slot-scope="scope">
          <el-image
            fit="contain"
            :src="scope.row.showPic"
            :preview-src-list="[scope.row.showPic]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="奖品数量"
        min-width="140"
        prop="prizeNum"
        show-overflow-tooltip
      />
    </el-table>
    <!-- <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :current-page.sync="pagination.page"
        :total="totalCount"
        @current-change="getList"
      />
    </div> -->
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { luckdrawPrizeRecodeList, getLuckdrawAcyivityList } from '@/api'
import { parseTime } from '@/utils'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'GetLuckdrawPrizeRecodeList',
  components: {
    QueryForm
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'acId',
          type: 'select',
          label: '抽奖活动',
          placeholder: '请选择抽奖活动',
          clearable: true,
          options: []
        }, {
          filed: 'phone',
          type: 'input',
          label: '会员手机号',
          placeholder: '请输入会员手机号',
          clearable: true
        }, {
          filed: 'memberName',
          type: 'input',
          label: '会员昵称',
          placeholder: '请输入会员昵称',
          clearable: true
        }, {
          filed: 'isHit',
          type: 'select',
          label: '是否中奖',
          placeholder: '请选择中奖状态',
          clearable: true,
          options: [
            { label: '未中奖', value: '0' },
            { label: '中奖', value: '1' }]
        }, {
          filed: 'prizeName',
          type: 'input',
          label: '奖品名称',
          placeholder: '请输入奖品名称',
          clearable: true
        }],
        online: true
      },
      filterForm: {},
      pagination: {
        page: 1,
        rows: 10
      },
      totalCount: 0,
      list: [],
      listLoading: false
    }
  },
  created() {
    this.getActivtyList()
    this.getList(1)
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    clear() {
      this.$refs.filterForm.resetFields()
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    /**
     * @获取活动列表
     */
    getActivtyList() {
      getLuckdrawAcyivityList({
        param: {
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.name
            e.value = e.id
          })
          this.queryFormConfig.formItems[0].options = arr
        })
        .catch(() => { })
    },
    getList(page) {
      const { filterForm, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      luckdrawPrizeRecodeList({
        pagination,
        param: { ...filterForm }
      })
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
          }
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
